<script setup>
import { onMounted, ref } from "vue";
import SonView from "./components/SonView.vue";
import TestView from "./components/TestView.vue";
import RoomPage from "./components/RoomPage.vue";

const msg = ref(100);

setTimeout(()=>{
    msg.value = 200;
    console.log(msg.value);
},2000)


//子传父
const getMsg =(msgCount) =>{
    console.log(msgCount);
}

// <div>--------------获取 Dom对象-----------</div>
  //1.调用ref 函数->ref 函数返回一个ref 对象
  const divRef = ref(null);
  const textView = ref(null);
  //2.通过 .value 获取 ref 对象中的数据
  onMounted(()=>{
    console.log(divRef.value)
    divRef.value.style.color = "red";

    console.log(textView.value)
  })

</script>

<template>
  <div class="son">
    <h3>父组件{{msgCount}}</h3>

    <SonView :msg ="msg" msgCont="来自 father 用来测试---------" />
  </div>

  <!-- 1.绑定数据 -->
  <SonView @get-msg="getMsg"/>

  <div>--------------获取 Dom对象-----------</div>
  <div ref="divRef">获取 Dom对象000</div>
  <TestView ref="textView"/>

  <div>--------------组建通信RoomPage-----------</div>

  <RoomPage/>



</template>


<style scoped>
</style>
